<template>
	<el-dialog v-model="dialogTableVisible" title="新增学员" width="500" :closed="initEdit">
		<el-form :model="form">
			<el-form-item label="手机号" :label-width="formLabelWidth">
				<el-input v-model="form.phone" autocomplete="off" placeholder="请输入手机号" />
			</el-form-item>
			<el-form-item label="项目" :label-width="formLabelWidth">
				<el-select v-model="form.kindName"  placeholder="请选择项目" size="large" clearable
					filterable @change="selectChange">
					<el-option v-for="item in coureseObj.kindName" :value="item.value" :key="item" />
				</el-select>
			</el-form-item>
			<el-form-item label="课程" :label-width="formLabelWidth">
				<el-select v-model="form.course"  placeholder="请选择课程名称" size="large" clearable
					filterable>
					<el-option v-for="item in initcoure" :value="item.value" :key="item" />
				</el-select>
			</el-form-item>
			<el-form-item label="班期" :label-width="formLabelWidth">
				<el-input placeholder="请输入班期" v-model="form.Class"></el-input>
			</el-form-item>
			<el-form-item label="是否启用" :label-width="formLabelWidth">
				<el-switch v-model="form.isR" />
			</el-form-item>
			<el-form-item label="更新人" :label-width="formLabelWidth">
				<el-input placeholder="请输入更新人" v-model="form.updateName"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="initEdit()">取消</el-button>
				<el-button type="primary" @click="save">
					确认
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>


<script setup>
	import {
		getCourseObj,
		addStudent
	} from '@/apis/student' // 关于学生数据的api
	import {
		ElButton,
		ElDialog,
		ElMessage
	} from 'element-plus';
	import {
		ref,
		reactive,
		defineExpose,
		defineEmits,
		onActivated,
		computed
	} from 'vue';
	const dialogTableVisible = ref(false) // 控制新增学员弹窗
	const form = ref({
		phone: '', // 手机号
		kindName: '', // 项目
		course: '', // 课程
		Class: '', // 班期 
		isR: true, // 是否启用
		updateName:''
	})
	
	
	// 初始化表单
	const initEdit = () => {
		console.log(1)
		form.value = {
		phone: '', // 手机号
		kindName: '', // 项目
		course: '', // 课程
		Class: '', // 班期 
		isR: true, // 是否启用
		updateName:''
	}
	dialogTableVisible.value  = false
	}

	const coureseObj = ref({}) // 课程分类对象
	const initcoure = ref([])
	// 父组件的事件,当修改完毕子组件触发调用
	const emit = defineEmits(['change'])
	const open = () => {
		// 打开新增学员
		dialogTableVisible.value = true
	}

	// 获取课程分类数据
	const getCourse = async () => {
		const {
			data
		} = await getCourseObj()
		coureseObj.value = data
	}


	// 生命周期
	onActivated(() => {
		getCourse()
	})
	
	// 项目课程切换
	const selectChange = (val)=>{
		console.log(val)
		coureseObj.value.kindName.forEach((item)=>{
			if (item.value == val){
				initcoure.value = item.courseName
			}
		})
	}
	
	const save = async ()=>{
		let {data} = await addStudent(form.value)
		if (!data.code){
			dialogTableVisible.value = false;
			ElMessage.success(data.msg);
			initEdit()
		}

		emit('change') // 触发主组件的数据更新
	}

	defineExpose({ // 将方法导出去给父组件使用用于控制抽屉打开和关闭
		open,
	})
</script>


<style>
</style>